<template>
  <div class="app-container">
    <el-card>
      <MyNavBar>
        <template #before>
          <el-form>
            <el-form-item prop="searchData">
              <el-input
                v-model="searchData"
                placeholder="根据用户名搜索"
                size="small"
                style="width: 200px"
              />
              <el-button size="small" style="margin-left: 15px" @click="clearKeyword">清空</el-button>
              <el-button type="primary" size="small" @click="searchKeyword">搜索</el-button>
            </el-form-item>
          </el-form>
        </template>
        <template #after>
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="addUserClick"
          >新增用户</el-button>
        </template>
      </MyNavBar>
      <el-alert type="info" :closable="false">
        <div class="el-alert__description">
          <i class="el-icon-info" style="font-size: 16px" />
          <div class="el-alert__content">
            <span class="el-alert__title">共{{ page.counts }}条记录</span>
          </div>
        </div>
      </el-alert>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="180" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="phone" label="联系电话" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="permission_group_title" label="权限组名称" />
        <el-table-column prop="role" label="角色" />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button type="primary" icon="el-icon-edit" circle plain @click="editUserClick(row)" />
            <el-button type="danger" icon="el-icon-delete" circle plain @click="deleteUserClick(row)" />
          </template>
        </el-table-column>
      </el-table>
      <!-- 放置分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height:60px">
        <el-pagination
          :current-page="page.page*1"
          :page-size="page.pagesize*1"
          :total="page.counts"
          layout="prev,pager,next"
          @current-change="changePage"
        />
      </el-row>
      <DialogUser :visible.sync="dialogShow" :select-date="selectDate" @success="getUserList" />
    </el-card>
  </div>
</template>
 <script>
import DialogUser from './componment/adduser.vue'
import MyNavBar from '@/components/MyNavBar/MyNavBar.vue'
import { userListAPI, deleteUserAPI } from '@/api/index'
export default {
  name: 'User',
  components: {
    DialogUser,
		MyNavBar
  },
  data() {
    return {
      tableData: [],
			page: {
				page: 1,
				pagesize: 10,
				counts: 0,
				pages: 0
			},
      dialogShow: false,
      selectDate: {},
      searchData: ''

    };
  },
	created() {
		this.getUserList()
	},
	methods: {
		// 获取用户信息的列表
		async	getUserList() {
			const res = await userListAPI(this.page)
			const { counts, page, pages, pagesize, list } = res
			// eslint-disable-next-line no-sequences
			this.page.page = page,
			this.page.pages = pages,
			this.page.pagesize = pagesize,
			this.page.counts = counts
			this.tableData = list
		},
		// 点击分页按钮，切换分页
		changePage(newpage) {
			this.page.page = newpage
			this.getUserList()
		},
		// 点击新增用户按钮，弹出弹层
		addUserClick() {
      this.selectDate = null;
      this.dialogShow = true;
		},
		// 点击编辑用户按钮，弹出弹层
		editUserClick(row) {
      this.selectDate = row
      this.dialogShow = true;
		},
		// 点击删除用户的按钮，删除当前行的用户
		async deleteUserClick(row) {

				await this.$confirm('确定要删除该用户吗？')
				await deleteUserAPI(row.id)
				this.getUserList()
				this.$message.success('删除成功！')

		},
		// 点击搜索按钮，搜索关键字
		async searchKeyword() {
			const { list } = await userListAPI({
				page: this.page.page,
				pagesize: this.page.pagesize,
				keyword: this.searchData
			})
			const arr = []
			list.forEach(item => {
				if (item.username.indexOf(this.searchData) !== -1) {
					return arr.push(item)
				}
			})
			this.tableData = arr
		},
		// 点击清除按钮，清空搜索框
		clearKeyword() {
			this.searchData = ''
		}
	}

}
</script>
<style scoped>
.app-container{
	padding: 15px;
}
::v-deep .el-card__body{
	padding-top: 15px;
}
.el-alert {
  margin-bottom: 20px;
}
.el-alert .el-alert__description {
  font-size: 12px;
  margin: 5px 0 0;
  display: flex;
  align-items: center;
}
.el-alert__content {
  display: table-cell;
  padding: 0 8px;
}
.el-alert__title {
  font-size: 13px;
  line-height: 18px;
}
.el-button--primary {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}
.el-button--danger {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
.el-button--medium.is-circle {
    padding: 10px;
}
</style>

